<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app"></div>
  <script src="./package/vue.js"></script>
  <script>
    Vue.component('parent', {
      data() {
        return {
          sonMsg: '',
          grandsonMsg: ''
        }
      },
      provide: {
        msg1: '父组件信息1',
        msg2: '父组件信息2',
        msg3: '父组件信息3',
      },
      template: `
        <div class="parent">
          <p>我是父组件</p>
          <p>接收到子组件的信息：{{sonMsg}}</p>
          <p>接收到子孙组件的信息：{{grandsonMsg}}</p>
          -----------------
          <child 
            @getChildMsg="getChildMsg"
            @getGrandsonMsg="getGrandsonMsg">
          </child>
        </div>
      `,
      methods: {
        getChildMsg(msg) {
          this.sonMsg = msg
        },
        getGrandsonMsg(msg) {
          this.grandsonMsg = msg
        }
      }
    })
    
    Vue.component('child', {
      inject: ['msg1'],
      template: `
        <div class="child">
          <p>我是子组件</p>
          <p>接收到父组件的信息：{{this.msg1}}</p>
          <button @click="sendData">传递信息给父组件</button>
          ------------------
          <grandson v-bind="$attrs" v-on="$listeners"></grandson>
        </div>
      `,
      methods: {
        sendData() {
          this.$emit('getChildMsg', '我是神子')
        }
      }
    })
    
    Vue.component('grandson', {
      inject: ['msg1', 'msg2', 'msg3'],
      template: `
        <div class="grandson">
          <p>我是子孙组件</p>
          <p>接收到祖父组件的信息：{{this.msg2}}</p>
          <p>接收到祖父组件的信息：{{this.msg3}}</p>
          <button @click="sendData">传递信息给父组件</button>
        </div>
      `,
      methods: {
        sendData() {
          this.$emit('getGrandsonMsg', '我是神孙')
        }
      }
    })

    var app = new Vue({
      el: '#app',
      template: `<parent></parent>`
    })
  </script>
</body>
</html>